<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
#menu {
	width: 500px;
	height: 100px;
    margin: 0 auto;
}
#list{
	list-style: none;
	position: relative;
	display: block;
}
#list li{
    float: left;
    margin-left: 20px;
}
#list li a{
	text-decoration: none;
}
#list ul{
	list-style: none;
	position: relative;
	top: 10px;
	left: -65px;
	display: none;
}
</style>
<script type="text/javascript">
	window.onload=function() {
		var Oul=document.getElementById("list");
		var length=Oul.children.length;
		
		for (var i = 0;i<length;i++) {
			Oul.children[i].onmouseover=function()
			{
				var childul=this.getElementsByTagName('ul')[0];
				childul.style.display="block";

			}
			
		}
			 for (var i = 0;i<length;i++) {
			 Oul.children[i].onmouseout=function()
			{
			 	var childul=this.getElementsByTagName('ul')[0];
			 	childul.style.display="none";

			}
		}
	}
	
</script>
<body>
<div id="menu">
	<ul id="list">
		<li><a href="">首页</a>
			<ul>
				<li>
					我的首页
				</li>
			</ul>
		</li>
		<li><a href="">新闻</a>
			<ul>
				<li>
					本地新闻
				</li>
			</ul>
		</li>
		<li><a href="">地图</a>
			<ul>
				<li>
					中国地图
				</li>
			</ul>
		</li>
		<li><a href="">视频</a>
			<ul>
				<li>
					百度视频
				</li>
			</ul>
		</li>
		<li><a href="">音乐</a>

			<ul>
				<li>
					百度音乐
				</li>
			</ul>
		</li>
		<li><a href="">贴吧</a>

			<ul>
				<li>
					百度贴吧
				</li>
			</ul>
		</li>
	</ul>
</div>
	
</body>
</html>